<template>
  <view class="order-model">
    <view v-if="order && order.is_agree == 1">
      <template v-if="order.user_send_express">
        <view class="express-company">
          <text>{{$t('clerk.company')}}：</text>
          <text>{{ order.user_send_express }}</text>
        </view>
        <view class="hold-line">
          <view></view>
        </view>
        <view class="express-num">
          <text>{{$t('clerk.number')}}：</text>
          <text>{{ order.user_send_express_no }}</text>
        </view>
      </template>
      <template v-else>
        <view class="express-company flex-between"  @click="show = true">
          <view>
            <text>{{$t('clerk.company')}}：</text>
            <text v-if="!express" class="company-select" >{{$t('clerk.chooseCom')}}</text>
            <text v-else @click="show = true">{{ express }}</text>
          </view>
          <image :src="asyncImgs.my.icon_right_3" mode=""></image>
        </view>
        <view class="hold-line">
          <view></view>
        </view>
        <view class="express-num">
          <text>{{$t('clerk.number')}}：</text>
          <input
            type="text"
            :placeholder="$t('clerk.fillNum')"
            v-model="express_no"
          />
        </view>
      </template>
      <u-select
        v-model="show"
        @confirm="checkExpress"
        :list="order.express_list"
        value-name="name"
        label-name="name"
      ></u-select>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      express: null,
      express_no: "",
      show: false,
    };
  },
  props: {
    order: {
      type: Object,
      default: function () {
        return null;
      },
    },
  },
  methods: {
    checkExpress(res) {
      this.express = res[0].value;
    },
  },
};
</script>

<style lang="scss"scoped>
.order-model {
  width: 100%;
  background: #ffffff;
  padding: 32rpx 0;
  margin-bottom: 24rpx;
  border-radius: 24rpx;

  .express-company {
    width: 100%;
    padding: 0 36rpx;
    display: flex;
    align-items: center;
    font-size: 26rpx;
    font-weight: 400;
    color: #262626;
    line-height: 44rpx;

    text:nth-child(1) {
      margin-right: 38rpx;
    }

    .company-select {
      color: #8c8c8c;
    }

    image {
      width: 10rpx;
      height: 20rpx;
      margin-left: 10rpx;
    }
  }

  .flex-between{
	  justify-content: space-between;
  }

  .hold-line {
    display: flex;
    justify-content: flex-end;
    margin: 32rpx 0;

    view {
      width: 574rpx;
      height: 1rpx;
      background: #f0f0f0;
    }
  }

  .express-num {
    width: 100%;
    padding: 0 36rpx;
    display: flex;
    align-items: center;
    font-size: 26rpx;
    font-weight: 400;
    color: #262626;
    line-height: 44rpx;

    text:nth-child(1) {
      margin-right: 38rpx;
    }
  }
}
</style>
